<template>
  <div class="course">
    <el-form :inline="true" :model="searchForm">
      <el-form-item label="课程名称">
        <el-input v-model="searchForm.courseName" placeholder="课程名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchForm.status" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="query">查询</el-button>
      </el-form-item>
      <el-button
        style="float: right"
        type="primary"
        icon="el-icon-plus"
        @click="$router.push({
          name: 'courses-new'
        })"
      >新建课程</el-button>
    </el-form>
    <el-table
      v-loading="loading"
      :data="courses"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
      >
      </el-table-column>
      <el-table-column
        prop="courseName"
        label="课程名称"
      >
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格"
      >
        <template slot-scope="scope">
          <span>￥{{scope.row.price}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="sortNum"
        label="排序"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
      >
        <template slot-scope="scope">
          <div class="status" :class="{
            'status-danger': scope.row.status === 0,
            'status-success': scope.row.status === 1
          }"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="操作"
        align="center"
        width="260">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status===0"
            type="success"
            @click="changeState(scope.row)"
          >上架</el-button>
          <el-button
            v-if="scope.row.status===1"
            type="danger"
            @click="changeState(scope.row)"
          >下架</el-button>
          <el-button
            @click="$router.push({
              name: 'courses-edit',
              params: {
                courseId: scope.row.id
              }
            })"
          >编辑</el-button>
          <el-button
            @click="$router.push({
              name: 'course-section',
              params: {
                courseId: scope.row.id
              },
              query: {
                courseName: scope.row.courseName
              }
            })"
          >内容管理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-wrapper">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="searchForm.currentPage"
        :disabled="loading"
        :page-sizes="[10, 15, 20]"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

import { getQueryCourses, changeState } from '@/services/course'

export default Vue.extend({
  name: 'CourseIndex',
  data () {
    return {
      options: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '上架',
          value: '1'
        },
        {
          label: '下架',
          value: '0'
        }
      ],
      searchForm: {
        courseName: '',
        currentPage: 1,
        pageSize: 20,
        status: ''
      },
      courses: [],
      loading: false,
      total: 0
    }
  },
  created () {
    this.loadCourse()
  },
  methods: {
    async changeState (row: any) {
      await changeState(row.id, row.status === 0 ? 1 : 0)
      const msg = row.status === 0 ? '上架成功' : '下架成功'
      this.$message.success(msg)
      this.loadCourse()
    },
    async loadCourse () {
      this.loading = true
      const { data } = await getQueryCourses(this.searchForm)
      this.courses = data.data.records
      this.total = data.data.total
      this.loading = false
    },
    query () {
      this.loadCourse()
    },
    handleSizeChange (val: number) {
      this.searchForm.pageSize = val
      this.searchForm.currentPage = 1
      this.loadCourse()
    },
    handleCurrentChange (val: number) {
      this.searchForm.currentPage = val
      this.loadCourse()
    }
  }
})
</script>

<style lang="scss" scoped>
.status {
  display: inline-block;
  cursor: pointer;
  width: .875rem;
  height: .875rem;
  vertical-align: middle;
  border-radius: 50%;
  &.status-danger {
    background-color: #ff6b6b;
  }
  &.status-success {
    background-color: #51cf66;
  }
}
.pagination-wrapper {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
